
import Vue from 'vue'
import App from './App.vue'
import router from './router'


import axios from './utils/axios'

Vue.prototype.$axios = axios;


// vant ui 全局引入
// import Vant from 'vant'
// import 'vant/lib/index.css'
// Vue.use(Vant)
import {ActionSheet, Dialog, Field, List, Tab, Tabs, Toast, Uploader} from 'vant';
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(List)
Vue.use(Uploader)
Vue.use(Dialog)
Vue.use(Field)
Vue.use(ActionSheet)
Vue.use(Toast)
import 'vant/lib/tab/style'
import 'vant/lib/tabs/style'
import 'vant/lib/list/style'
import 'vant/lib/uploader/style'
import 'vant/lib/dialog/style'
import 'vant/lib/field/style'
import 'vant/lib/action-sheet/style'
import 'vant/lib/toast/style'



// 过滤器
Vue.filter('fixImgUrl', (oldUrl) => {
  if(oldUrl.indexOf("http") > -1) {
    return oldUrl;
  } else {
    return axios.defaults.baseURL + oldUrl;
  }
})

Vue.config.productionTip = false


// 配置 vuex
// 1. 引入 vuex
import Vuex from 'vuex'
// 2. 注册到 Vue 组件内
Vue.use(Vuex)
// 3. 实例化一个 Vuex 的仓库, 往里添加配置对象
const store = new Vuex.Store({
  // state 是共享状态数据的对象
  state: {
    historyList: [],
    count: 0,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
    productName: '苹果10',
    productPrice: 166,
    productNumber: 1,
  },
  // mutations 是用来修改数据的函数对象
  mutations: {
    addProductNumber(state) {
      state.productNumber += 1
    },
    addCount(state) {
      state.count += 1
    },
    addHistory(state, data) {
      // 判断推入进来的数据, 在原数组中不存在
      // 再放入
      if(state.historyList.indexOf(data) === -1) {
        state.historyList.push(data)
      }
    },
    recoverHistory(state, data) {
      state.historyList = data
    }
  },
  // action 用来处理异步逻辑
  actions: {
    asyncAddCount(context) {
      setTimeout(() => {
        context.commit('addCount')
      }, 1000);
    }
  },
  // getters 可以在 state 基础上派生状态, 类似 computed
  getters: {
    // listLessThanFive(state) {
    //   const newList = state.list.filter(item=>{
    //     return item<5
    //   })
    //   return newList
    // }
    // 上面的写法可以缩写成下面这样
    listLessThanFive: state => state.list.filter(item => item < 5),
    totalPrice: state => state.productPrice * state.productNumber,
    token: state => state.user.token,
    appName: state => state.setting.appName
  },
  modules: {
    // 每个属性都是一个模块
    user: {
      namespaced: true,
      state: {
        token: '666666'
      },
      mutations: {
        addToken(state) {
          state.token+=1
        }
      }
    },
    setting: {
      state: {
        appName: '黑马头条'
      }
    }
  }
})

new Vue({
  router,
  store,
  render: function(h) {return h(App)}
}).$mount('#app')
